<template>
    <el-button size="small" type="success" @click="hangAdd()">添加</el-button>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="编号" prop="uid" />
        <el-table-column label="姓名" prop="uName" />
        <el-table-column label="邮箱" prop="uMailbox" />
        <el-table-column label="职位" prop="roleName" />
        <el-table-column label="薪资" prop="actualSalary" />
        <el-table-column align="right">
            <template #header>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-input v-model="name" placeholder="Type to search" />
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="search()">查询</el-button>
                    </el-col>
                </el-row>
            </template>
            <template #default="scope">
                <el-button  @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button  type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                <el-button  type="success" @click="hangYeji(scope.$index, scope.row)">查看业绩</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 8, 12, 16]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="添加" :width="300" :height="300">
        <el-form :model="form">
            <input type="hidden" v-model="form.uid">
            <input type="hidden" v-model="form.salaryID">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.uName" autocomplete="off" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.uMailbox" autocomplete="off" placeholder="请输入所在班级" />
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-select v-model="form.roleID" placeholder="请选择职位">
                    <el-option v-for="item in down" :key="item.roleID" :label="item.roleName" :value="item.roleID" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="Add()">确认</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 业绩弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="个人业绩" width="800">
        <el-table :data="gridData">
            <el-table-column property="employeeID" label="员工编号" />
            <el-table-column property="salesAmount" label="本月业绩" />
        </el-table>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import axios from 'axios'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from "element-plus";
import { markRaw } from "vue";
import { useRouter } from "vue-router";
import { Delete } from "@element-plus/icons-vue";
//分页数据
const currentPage = ref(1); //第几页
const pageSize = ref(5); //行数
const totalCount = ref(0);
const tableData = ref([]);
const gridData = ref([]);
const name = ref("");
const router = useRouter();
// // 在搜索框输入时触发筛选
const search = () => {
    select();
}
const dialogVisible = ref(false)
const dialogTableVisible = ref(false)
const form = ref({
    uid: 0,
    uName: "",
    upassword: "",
    uMailbox: "",
    roleID: 1,
    salaryID: 1,
    uDate: "2023-10-10",
});
const form1 = ref({
    uid: 0,
    uName: "",
    upassword: "",
    uMailbox: "",
    roleID: 1,
    salaryID: 1,
    uDate: "2023-10-10",
})
const down = ref([])
//添加页面
function hangAdd() {
    // form.value={id:0}
    form.value = form1.value;
    dialogVisible.value = true;
}
//编辑页面
function handleEdit(index, row) {
    dialogVisible.value = true
    form.value.uid = row.uid
    form.value.uName = row.uName
    form.value.uPhone = row.uPhone
    form.value.uMailbox = row.uMailbox
    form.value.roleID = row.roleID
    form.value.salaryID = row.salaryID
    form.value.uDate = row.uDate
}
//下拉框
function donnbox() {
    axios({
        method: 'get',
        url: 'https://localhost:7052/api/Role/GteRole',
    }).then((res) => {
        down.value = res.data
    });
}
//添加编辑
function Add() {
    console.log(form.value);
    axios({
        url: "https://localhost:7052/api/Home",
        method: form.value.uid === 0 ? "post" : "put",
        data: form.value,
        headers: {
            'Conten-Type': 'application/json'
        }
    }).then((result) => {
        if (result.data) {
            ElMessage({
                message: "操作成功",
                type: "success",
            });
            dialogVisible.value = false;
            select();
        } else {
            ElMessage({
                message: "操作失败",
                type: "waring",
            });
        }
    });
}
onMounted(() => {
    select();
    donnbox();
})
//数据
function select() {
    axios({
        method: 'get',
        url: 'https://localhost:7052/api/Home?pagesize=' + pageSize.value + "&pagenumber=" + currentPage.value + "&name=" + name.value,
    }).then((res) => {
        tableData.value = res.data.data;
        totalCount.value = res.data.totalCount
    });
}


const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    select();
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
    select();
}
const hangYeji = (index, row) => {
    dialogTableVisible.value = true
    const id = row.uid;
    sehyeji(id);
}
//业绩接口
function sehyeji(id) {
    axios({
        method: 'get',
        url: 'https://localhost:7052/api/DrinkInfo?empid='+id,
    }).then((res) => {
        console.log(res.data)
        gridData.value=res.data;
    });
}
//删除方法
const handleDelete = (index, row) => {
    ElMessageBox.confirm("删一个试试~?", "Warning", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        icon: markRaw(Delete),
    })
        .then(() => {
            axios({
                method: "delete",
                url: `https://localhost:7052/api/Home/De?uid=${row.uid}`,
            }).then((response) => {
                if (response.data) {
                    ElMessage({
                        message: "删除成功",
                        type: "success",
                    });
                    select();
                } else {
                    ElMessage({
                        message: "删除失败",
                        type: "waring",
                    });
                }
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
</script>
<style></style>